<template>
  <el-row :gutter="20" class="text-center">
    <el-col :span="5" class="tooltip-box">
      <el-tooltip
        class="box-item"
        effect="dark"
        content="你已经在首页了"
        placement="bottom"
      >
        <h1>医学知识图谱</h1>
      </el-tooltip>
    </el-col>
    <el-col :span="8" :offset="11" class="search_input">
      <el-space>
        <el-space size="default">
          <el-input
            v-model="state"
            size="large"
            clearable
            placeholder="Please input"
            @keyup.enter="search"
          />
          <el-button size="large" @click="search()">Search</el-button>
          <br />
        </el-space>
        <div class="tooltip-box">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="导出文件"
            placement="bottom"
          >
            <el-button size="large" @click="to_export_page()">
              <el-icon size="200"> <download /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
        <div class="tooltip-box">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="查看全部文件"
            placement="bottom"
          >
            <el-button size="large" @click="expanded()">
              <el-icon size="200"> <expand /></el-icon>
            </el-button>
          </el-tooltip>
        </div>
      </el-space>
    </el-col>
  </el-row>
</template>
<script>
import { ref } from "vue";
export default {
  data() {
    return {
      state: ref(""),
    };
  },
  methods: {
    search: function () {
      // console.log("搜索");
      this.$emit("search", this.state);
    },
    expanded: function () {
      // console.log("expand");
      this.$emit("expand");
    },
    to_export_page:function(){
      this.$router.push({
        name: "Export",
        params: { body: JSON.stringify(
          {
            "search_content":this.search_content,
            "search_length":this.node_num,
            "appearance":this.force_num,
            "current_show":false
          }) },
      });
    }
  },
};
</script>

<style scoped>
.text-center {
  box-sizing: border-box;
  padding: 10px 0px;
  justify-self: center;
  background-color: rgba(241, 241, 241, 0.788);
}
.tooltip-box {
  font-size: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: rgb(20, 20, 71);
}
.tooltip-box h1 {
  width: 100%;
  text-align: center;
}

.tooltip-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.tooltip-box .center {
  justify-content: center;
}
.tooltip-box .box-item {
  width: 110px;
  margin-top: 10px;
}

.search_input {
  font-size: 15px;
  justify-self: flex-end;
}
</style>
